<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>轮播图</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .wrapper {
        position: relative;
        margin: 100px auto 0px;
        width: 400px;
        height: 250px;
        overflow: hidden;
        border: 1px solid black;
    }

    .wrapper .sliderPage {
        position: absolute;
        left: 0;
        top: 0;
        height: 250px;
        width: 1600px;
    }

    .wrapper .sliderPage li {
        width: 400px;
        height: 250px;
        float: left;
    }

    .wrapper .sliderPage li img {
        width: 100%;
        height: 100%;
    }

    .wrapper .btn {
        position: absolute;
        top: 50%;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        color: #fff;
        background: #000;
        text-align: center;
        line-height: 40px;
        opacity: 0.2;
        cursor: pointer;
    }

    .wrapper:hover .btn {
        opacity: 0.7;
    }

    .wrapper .leftBtn {
        left: 15px;
    }

    .wrapper .rightBtn {
        right: 15px;
    }

    .wrapper .sliderIndex {
        position: absolute;
        bottom: 15px;
        width: 100%;
        text-align: center;
        cursor: pointer;
    }

    .wrapper .sliderIndex span {
        display: inline-block;
        width: 8px;
        height: 8px;
        background: #ccc;
        border-radius: 50%;
        /* margin-right:  */
    }

    .wrapper .sliderIndex .active {
        background: #f40;
    }
</style>

<body>
    <div class="wrapper">
        <ul class="sliderPage">
            <li>
                <img src="../../../images/2-1.png" alt="">
            </li>
            <li>
                <img src="../../../images/2-2.png" alt="">
            </li>
            <li>
                <img src="../../../images/2-3.png" alt="">
            </li>
            <li>
                <img src="../../../images/2-1.png" alt="">
            </li>
        </ul>
        <div class="btn leftBtn">
            <</div> <div class="btn rightBtn">>
        </div>
        <div class="sliderIndex">
            <span class="active"></span>
            <span></span>
            <span></span>
        </div>
    </div>

</body>
<script src="./move.js"></script>
<script>

    var timer = null;
    var sliderPage = document.getElementsByClassName('sliderPage')[0];
    var moveWidth = sliderPage.children[0].offsetWidth;
    var num = sliderPage.children.length - 1;
    var leftBtn = document.getElementsByClassName('leftBtn')[0];
    var rightBtn = document.getElementsByClassName('rightBtn')[0];
    var oSpanArray = document.getElementsByClassName('sliderIndex')[0].getElementsByTagName('span');
    //锁机制 没有进行完一次轮播时操作不会生效
    var lock = true;
    //下面的索引点
    var index = 0;

    leftBtn.onclick = function () {
        console.log();
        autoMove('right->left');
    };
    rightBtn.onclick = function () {
        autoMove('left->right');
    };
    for (var i = 0; i < oSpanArray.length; i++) {
        (function (myIndex) {
            oSpanArray[i].onclick = function () {
                lock = false;
                clearTimeout(timer);
                index = myIndex;
                startMove(sliderPage,{left: - index * moveWidth},function(){
                    lock = true;
                    timer = setTimeout(autoMove,1500);
                    changeIndex(index);
                })
            }
        }(i))

    }

    //方向   direction
    //默认轮播方向 点击right  'left -> right'  undefined
    //点击left按钮  'right->left'
    //
    function autoMove(direction) {
        if (lock) {
            lock = false;
            clearTimeout(timer);
            if (!direction || direction == 'left->right') {
                index++;
                startMove(sliderPage, { left: sliderPage.offsetLeft - moveWidth }, function () {
                    if (sliderPage.offsetLeft == -num * moveWidth) {
                        index = 0;
                        sliderPage.style.left = '0px';
                    }
                    timer = setTimeout(autoMove, 1500);
                    lock = true;
                    changeIndex(index);
                })
            } else if (direction == 'right->left') {
                //一开始点击左箭头向前翻滚
                if (sliderPage.offsetLeft == 0) {
                    sliderPage.style.left = -num * moveWidth + 'px';
                    index = num;
                }
                index--;
                startMove(sliderPage, { left: sliderPage.offsetLeft + moveWidth }, function () {
                    timer = setTimeout(autoMove, 1500);
                    lock = true;
                    changeIndex(index);
                })
            }
        }

    }
    //下方索引小点
    function changeIndex(_index) {
        for (var i = 0; i < oSpanArray.length; i++) {
            oSpanArray[i].className = '';
        }
        oSpanArray[_index].className = 'active';
    };

    timer = setTimeout(autoMove, 1500)

</script>

</html>